<template>
	<article class="brick entry format-gallery group animate-this">

		<div class="entry-thumb" style="border-top-right-radius: 10px; border-top-left-radius: 10px;">

			<div class="post-slider flexslider">
				<ul class="slides">
					<li>
						<img v-if="flags == 1" :src="picture" @click="dialogvisible = true">
						<router-link v-if="flags == 0" :to="{ name: 'Info', params: { id: this.id, name: this.name, description: this.description, picture: this.picture }}">
							<img :src="picture" >
						</router-link>
					</li>
					<li>
						<img src="@/assets/images/thumbs/gallery/work2.jpg">
					</li>
					<li>
						<img src="@/assets/images/thumbs/gallery/work3.jpg">
					</li>
				</ul>
			</div>

		</div>

		<div class="entry-text" style="border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
			<div class="entry-header">

				<!-- <div class="entry-meta">
					<span class="cat-links">
						<a href="#">Branding</a>
						<a href="#">Wordpress</a>
					</span>
				</div> -->

				<h1 v-if="flags == 1" class="entry-title" @click="dialogvisible = true"><a>{{ name }}</a></h1>

				<router-link v-if="flags == 0" :to="{ name: 'Info', params: { id: this.id, name: this.name, description: this.description, picture: this.picture }}">
					<h1 class="entry-title"><a>{{ name }}</a></h1>
				</router-link>
			</div>
			<div class="entry-excerpt">
				{{ description }}
			</div>
		</div>


		<show :dialogVisible="dialogvisible" v-on:childByValue="childByValue" :name="name" :id='id' :description='description'
		:picture='picture'></show>

	</article> <!-- end article -->
</template>

<script>
	import show from '../show.vue'
	export default {
		name: 'article1',
		components: {
			show
		},
		props: {
			description: {
				type: String,
				default: '描述'
			},
			name: {
				type: String,
				default: 'Workspace Design Trends and Ideas.'
			},
			id: {
				type: Number,
				default: 0
			},
			picture: {
				type: String,
				default: ''
			},
			flags: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				dialogvisible: false
			};
		},
		methods: {
			childByValue: function(flags) {
				// flags就是子组件传过来的值
				this.dialogvisible = flags
			}
		}
	}
</script>

<style>
</style>
